thsh = this;
// 获取所有
let onrighta = document.querySelectorAll(".right-a");
console.log(onrighta);
// 遍历
for (let i = 0; i < onrighta.length; i++) {
  // 给每个添加index属性
  onrighta[i].index = i;
  // onrighta[i].classList.remove('hoverr-a')
  onrighta[i].addEventListener("click", function () {
    // console.log(onrighta[i].index)
    thsh.removehaver();
    onrighta[i].classList.add("hoverr-a");
  });

 
}
//  排他思想
function removehaver() {
  for (let i = 0; i < onrighta.length; i++) {
    onrighta[i].classList.remove("hoverr-a");
  }
}

// 轮播图
function moves(obj, target, callback) {
  window.clearInterval(obj.timer);
  obj.timer = window.setInterval(function () {
    let step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == target) {
      window.clearInterval(obj.timer);
      if (callback) {
        callback();
      }
    } else {
      obj.style.left = obj.offsetLeft + step + "px";
    }
  }, 15);
}
// 移动到图片上的时候左右的箭头才显示出来 离开后又隐藏
let focusing = document.querySelector(".focus");
// 获取左箭头
let arrowleft = document.querySelector(".arrow-left");
// 获取右箭头
let arrowright = document.querySelector(".arrow-right");
let ul = document.querySelector("ul");
// 获得图片张数
let len = ul.children.length;
// 动态生成下面的小圆点
let ol = document.querySelector("ol");
for (let i = 0; i < len - 1; i++) {
  let newcircle = document.createElement("li");
  ol.appendChild(newcircle);
}
// 把ol里面的第一个li的类名设置成current
ol.children[0].className = "current";
// 收移动到focus的时候显示箭头
focusing.addEventListener("mouseenter", function () {
  // 鼠标移动到图片的时候清除定时器
  window.clearInterval(timer);
  timer = null;
  arrowleft.style.display = "block";
  arrowright.style.display = "block";
});
// 鼠标离开又隐藏
focusing.addEventListener("mouseleave", function () {
  // 鼠标离开又重新设置定时器
  // 自动播放轮播图
  timer = window.setInterval(function () {
    // 手动调用点击事件
    arrowright.click();
  }, 2000);
  arrowleft.style.display = "none";
  arrowright.style.display = "none";
});
// 给每个小圆点设置自定义属性
for (let i = 0; i < len - 1; i++) {
  ol.children[i].setAttribute("index", i);
}
// 点击哪个小圆圈哪个小圆圈就变色 -排他思想
for (let i = 0; i < len - 1; i++) {
  ol.children[i].addEventListener("click", function () {
    for (let j = 0; j < len - 1; j++) {
      ol.children[j].className = "";
    }
    // 点击第几个小圆点ul就移动小圆点坐标乘以图片宽度
    // alert(-(this.getAttribute('index') * ul.children[0].offsetWidth));
    moves(ul, -this.getAttribute("index") * ul.children[0].offsetWidth);
    num = this.getAttribute("index");
    circle = this.getAttribute("index");
    this.className = "current";
  });
}
// 点击右边箭头 设置一个num进行移动距离
let num = 0;
// 点击右边的箭头小圆圈也变色
let circle = 0;
arrowright.addEventListener("click", function () {
  if (num == len - 1) {
    ul.style.left = 0;
    num = 0;
    circle = 0;
  }
  num++;
  moves(ul, -num * ul.children[0].offsetWidth);
  circle++;
  for (let i = 0; i < len - 1; i++) {
    ol.children[i].className = "";
  }
  // 在加到最后一张重复图片的时候就把第一个圆点变色
  if (circle == len - 1) {
    // alert('haha')
    ol.children[0].className = "current";
  } else {
    ol.children[circle].className = "current";
  }
});
// 点击左边箭头
arrowleft.addEventListener("click", function () {
  if (num == 0) {
    num = len - 1;
    ul.style.left = -num * ul.children[0].offsetWidth;
    circle = len - 1;
  }
  num--;
  moves(ul, -num * ul.children[0].offsetWidth);
  circle--;
  for (let i = 0; i < len - 1; i++) {
    ol.children[i].className = "";
  }
  // 在减到最后一张重复图片的时候就把第一个圆点变色
  if (circle == 0) {
    // alert('haha')
    ol.children[0].className = "current";
  }
  ol.children[circle].className = "current";
});
// 自动播放轮播图
let timer = window.setInterval(function () {
  // 手动调用点击事件
  arrowright.click();
}, 2000);

//#region
let series = [];
let xAxis = [];

let httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "https://gongjuhao.com/api/?type=month", true);
httpRequest.send();

httpRequest.onreadystatechange = function () {
  if (httpRequest.readyState == 4 && httpRequest.status == 200) {
    let text = httpRequest.responseText; //获取到json字符串，还需解析
    console.log(JSON.parse(text));
    let textData = JSON.parse(text);
    series = textData.data.series;
    xAxis = textData.data.xAxis;
    newoption(xAxis,series)
  }
};
// 闭包延长变量 
function newoption(xAxis,series) {
  // 图表

option = {
  title: {
    text: "曲线数据展示",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
    },
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    // prettier-ignore
    data: xAxis,
  },
  yAxis: {
    type: "value",
    name: "商品数",
    min: 0,
    max: 10000,
    interval: 2000,
    axisLabel: {
      formatter: "{value} 人",
    },
    axisPointer: {
      snap: true,
    },
  },
  visualMap: {
    show: false,
    dimension: 0,
    pieces: [
      {
        gt: 0,
        lte: 17,
        color: "blue",
      },
    ],
  },
  series: [
    {
      name: "人数",
      type: "line",
      smooth: true,
      // prettier-ignore
      data:series,
    },
  ],
};
let myChart = echarts.init(document.querySelector(".ipage-chart-send"));
myChart.setOption(option);
}


//#endregion



let option2 = {
  title: {
    text: "饼状图形数据展示",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },

  series: [
    {
      name: "Access From",
      type: "pie",
      radius: "50%",
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};
let myChart2 = echarts.init(document.querySelector(".four-echarts"));
myChart2.setOption(option2);

let option3 = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
    name: "商品数",
    min: 0,
    max: 15,
    interval: 3,
    axisLabel: {},
  },
  series: [
    {
      data: [9, 11, 13, 10, 8, 11, 5],
      type: "bar",
    },
  ],
};

let myChart3 = echarts.init(document.querySelector(".four-echart2"));
myChart3.setOption(option3);
